<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/newsContent.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {
            var id = getParams().id;
            $.get("/dailyCommends/" + id, function (data) {
                $('.newsDetail').renderValues(data);
            })
        })
    </script>
    <style type="text/css">
        .md-input {
            margin: 0 auto;
        }
    </style>
    <script>
        $(function () {
            var id = getParams().id;
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (user) {
                var user = JSON.parse(sessionStorage.getItem("user"));
                var userId = user.id;
                $('.btn-primary').click(function () {
                    var content = $('.md-input').val();
                    console.log(content);
                    $.ajax({
                        url:'/comment/saveOrUpdate',
                        type:'POST',
                        data:{user_id:userId,target_id:id,content:content,type:4},
                        async:false,
                        success:function (data) {
                            if (data.success) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '评论成功'
                                });
                            }else {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '评论失败'
                                });
                            }
                        }
                    })
                    window.location.reload();
                    $(".md-input").val("");

                })
            }

        })
    </script>
    <script>
        $(function () {
            var id = getParams().id;
            // 查询所有该日报的评论
            $.get("comment", {type: 4, pageSize: 4, target_id: id}, function (data) {
                // 没有评论就隐藏丑的一批的拼接多余字段
                if (data == null) {
                    $(".ccc").detach();
                    return;
                }
                $("#comments").renderValues(data);
            })
        })
    </script>
</head>

<body>
<div class="newsDetail">
    <div>
        <a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
            <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
        </a>
        <img render-src="coverUrl">

        <div class="container">
            <div class="row typeRow">
                <div class="col-4">
                    <span class="type">美图美文</span>
                </div>
                <div class="col-2">
                </div>
                <div class="col-2">
                    <span>By</span>
                </div>
                <div class="col-4">
                    <span class="type" render-html="source"></span>
                </div>
            </div>

            <div class="detail">
                <h2 class="title" render-html="title"></h2>
                <div class="content" render-html="commendContent.content">
                    <!--文章内容-->
                </div>
            </div>
        </div>
    </div>
    <hr  style=" border:solid; width:90%; height:1px;" color=#000000 size=1px/>

    <!--评论文本框-->
    <h3 id="tree_comm_title" style="position: relative; left: 20px;">
        评论
    </h3>
    <div class="ui form">
        <input id="comment_url" name="comment_url" type="hidden" value="/groupworks/luowowo2/comment">
        <div class="field">
            <textarea class="md-input"
                      style="width:90% ; height:200px; position: relative; left: 20px; bottom: 10px; margin-top: 10px"
                      id="editor_comment" placeholder="在此输入你想说的话"></textarea>
        </div>
        <div class="ui field right" style="text-align:right; position: relative;right: 20px; bottom: 10px;">
            <div class="ui orange button js-comment-button " id="only_comment">
                <button type="button" class="btn btn-lg btn-primary ">评论</button>
            </div>
        </div>
    </div>
    <!--评论回显-->
    <div id="comments" class="ccc">
        <div render-loop="list">
            <div>
                <a render-html="list.id" id="SingleComment" display="none" class="singleComment"></a>
                <a data-href="/mine/profiles.html" class="dynamic-detail">
                    <span><img render-src="list.headImgUrl" height="20px" width="20px" style="position: relative; left: 20px; bottom: 10px; margin-top: 10px;" ></span>
                    <span render-html="list.username"></span> <span>评论了日报 : <a render-html="list.targetname">
            </a>
                <span render-html="list.create_time"></span></span>
                </a>
                <hr>
                <p render-html="list.content"style="position: relative; left: 20px; bottom: 10px; margin-top: 10px;"></p>
                <hr>
            </div>
        </div>
    </div>
</div>

</body>
</html>